<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #all {
            
        }
        #pic{
            position: relative;
        }
        .mask {
            display: none;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #FEDE4F;
            /* opacity: 0.2%; */
            opacity: .5;
            cursor: move;
        }

        .big {
            display: none;
            width: 700px;
            height: 500px;
            position: absolute;
            left: 550px;
            top: 0px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="all">
        <DIV id="pic" style="width: 400px; height: 400px;">
            <img src="./images/汽车1.jpg" alt="" >
        </DIV>
        <div class="mask">1</div>
        <div class="big"><img src="./images/汽车1.jpg" alt="" style="width: 700px; height: 500px;"> </div>
    </div>
    <script>
        var pic = document.querySelector('#pic')
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big')
        //当我们鼠标经过就显示
        pic.addEventListener('mouseover', function () {
            mask.style.display = 'block'
            big.style.display = 'block'
        })
        pic.addEventListener('mouseout', function () {
            mask.style.display = 'none'
            big.style.display = 'none'
        })
        pic.addEventListener('mousemove', function (e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            var maskX=x - 100 + 'px';
            var maskY=y - 100 + 'px';
            if (maskX<=0) {
                mask=0+'px'
            }
            mask.style.left = 
            mask.style.top = y - 100 + 'px'
        })
    </script>
</body>

</html>